<template>
  <div class="koi-timeline">
    <div class="timeline-entry">
      <div class="timeline-title">
        <div class="line-height-normal">
          <div class="text-14px m-b-2px text-[--el-text-color-primary]">2019-09 ~ 至今</div>
          <div class="text-14px font-bold text-[--el-text-color-primary] m-b-2px">大灰狼科技有限公司</div>
          <div class="text-14px text-[--el-color-primary] font-bold chroma-text">全栈工程师</div>
          <div class="text-14px text-[--el-text-color-primary]">KOI-ADMIN项目开发</div>
        </div>
      </div>
      <div class="timeline-content">
        <div
          class="bg-[rgba(78,113,253,0.1)] shadow-[--el-box-shadow-light] backdrop-blur-lg border-1px border-solid border-[--el-border-color-light] p-x-10px p-y-16px rounded-6px w-400px text-14px line-height-normal text-[--el-text-color-regular]"
        >
          <div class="font-bold">项目简介：</div>
          <div class="m-t-5px">KOI-ADMIN🌻 是一款企业级别的中后台管理平台模板，基于 Vue3、Vite、TypeScript、Pinia、Pinia持久化插件、Unocss 和 ElementPlus等前端最新技术栈。后端采用 SpringBoot3.x、JDK17、Sa-Token、Redis、MybatisPlus以及插件化开发等。相较于其他比较流行的后台管理模板，更加简洁、快捷和容易理解，对萌新小白十分友好。</div>
          <div class="m-t-5px font-bold">项目贡献：</div>
          <div class="m-t-5px">1、使用ElementPlus、Pinia、Vite、TypeScript、Vue3开发前端模版。</div>
          <div class="m-t-5px">2、多种布局和丰富的主题适配移动端、IPad和PC端。</div>
          <div class="m-t-5px">3、内置权限管理页面、定时任务、代码生成器等功能，直接开箱使用。</div>
          <div class="m-t-5px">4、使用SpringBoot、Sa-Token、Redis等敏捷开发，内置各种插件[例如：数据脱敏、EasyExcel导出、权限注解等]。</div>
        </div>
      </div>
    </div>

    <div class="timeline-entry">
      <div class="timeline-title">
        <div class="line-height-normal">
          <div class="text-14px m-b-2px text-[--el-text-color-primary]">2019-09 ~ 至今</div>
          <div class="text-14px font-bold text-[--el-text-color-primary] m-b-2px">大灰狼科技有限公司</div>
          <div class="text-14px text-[--el-color-primary] font-bold chroma-text">全栈工程师</div>
          <div class="text-14px text-[--el-text-color-primary]">KOI-ADMIN项目开发</div>
        </div>
      </div>
      <div class="timeline-content">
        <div
          class="bg-[rgba(72,137,218,0.1)] shadow-[--el-box-shadow-light] backdrop-blur-lg border-1px border-solid border-[--el-border-color-light] p-x-10px p-y-16px rounded-6px w-400px text-14px line-height-normal text-[--el-text-color-regular]"
        >
          <div class="font-bold">项目简介：</div>
          <div class="m-t-5px">KOI-ADMIN🌻 是一款企业级别的中后台管理平台模板，基于 Vue3、Vite、TypeScript、Pinia、Pinia持久化插件、Unocss 和 ElementPlus等前端最新技术栈。后端采用 SpringBoot3.x、JDK17、Sa-Token、Redis、MybatisPlus以及插件化开发等。相较于其他比较流行的后台管理模板，更加简洁、快捷和容易理解，对萌新小白十分友好。</div>
          <div class="m-t-5px font-bold">项目贡献：</div>
          <div class="m-t-5px">1、使用ElementPlus、Pinia、Vite、TypeScript、Vue3开发前端模版。</div>
          <div class="m-t-5px">2、多种布局和丰富的主题适配移动端、IPad和PC端。</div>
          <div class="m-t-5px">3、内置权限管理页面、定时任务、代码生成器等功能，直接开箱使用。</div>
          <div class="m-t-5px">4、使用SpringBoot、Sa-Token、Redis等敏捷开发，内置各种插件[例如：数据脱敏、EasyExcel导出、权限注解等]。</div>
        </div>
      </div>
    </div>

    <div class="timeline-entry">
      <div class="timeline-title">
        <div class="line-height-normal">
          <div class="text-14px m-b-2px text-[--el-text-color-primary]">2019-09 ~ 至今</div>
          <div class="text-14px font-bold text-[--el-text-color-primary] m-b-2px">大灰狼科技有限公司</div>
          <div class="text-14px text-[--el-color-primary] font-bold chroma-text">全栈工程师</div>
          <div class="text-14px text-[--el-text-color-primary]">KOI-ADMIN项目开发</div>
        </div>
      </div>
      <div class="timeline-content">
        <div
          class="bg-[rgba(238,163,98,0.1)] shadow-[--el-box-shadow-light] backdrop-blur-lg border-1px border-solid border-[--el-border-color-light] p-x-10px p-y-16px rounded-6px w-400px text-14px line-height-normal text-[--el-text-color-regular]"
        >
          <div class="font-bold">项目简介：</div>
          <div class="m-t-5px">KOI-ADMIN🌻 是一款企业级别的中后台管理平台模板，基于 Vue3、Vite、TypeScript、Pinia、Pinia持久化插件、Unocss 和 ElementPlus等前端最新技术栈。后端采用 SpringBoot3.x、JDK17、Sa-Token、Redis、MybatisPlus以及插件化开发等。相较于其他比较流行的后台管理模板，更加简洁、快捷和容易理解，对萌新小白十分友好。</div>
          <div class="m-t-5px font-bold">项目贡献：</div>
          <div class="m-t-5px">1、使用ElementPlus、Pinia、Vite、TypeScript、Vue3开发前端模版。</div>
          <div class="m-t-5px">2、多种布局和丰富的主题适配移动端、IPad和PC端。</div>
          <div class="m-t-5px">3、内置权限管理页面、定时任务、代码生成器等功能，直接开箱使用。</div>
          <div class="m-t-5px">4、使用SpringBoot、Sa-Token、Redis等敏捷开发，内置各种插件[例如：数据脱敏、EasyExcel导出、权限注解等]。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.koi-timeline {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.koi-timeline:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 300px;
  bottom: 0px;
  width: 4px;
  height: 100%;
  background: var(--el-border-color);
}
.timeline-title {
  margin-bottom: 10px;
  width: 280px;
  padding-right: 30px;
  text-align: right;
  position: relative;
}
.timeline-title:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 4px solid var(--el-color-primary);
  background-color: #F7F7F7;
  border-radius: 100%;
  top: 6px;
  left: 294px;
  z-index: 99;
}
.timeline-entry {
  display: flex;
  margin-top: 16px;
}
.timeline-content {
  width: 500px;
  padding: 10px 18px;
  margin-left: 18px;
}

/** 彩色字体 */
.chroma-text {
  background: linear-gradient(270deg, rgba(198, 141, 255, 0.9) 8.92%, #5685FF 46.17%, #48D6FF 92.17%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  color: transparent;
}
</style>
